<template>

<div class='menu-wrap' v-touch:tap="toggleWapMenu"></div>
<!-- <hello-world>第三方组件</hello-world> -->
<!-- <HelloWorld>自定义组件</HelloWorld> -->
<!-- <Hello class="active">sfcSlot</Hello> -->
  <el-aside :width="isCollapse ? '64':'200'" style="background-color: rgb(238, 241, 246);transition: all .2s;" class="menu-pc">
    <el-menu
      :default-active="$route.fullPath"
      class="el-menu-vertical-demo"
      @open="menuOpen"
      @close="menuClose"
      :collapse="isCollapse"
      @select="menuSelect"
    >
      <el-sub-menu  v-for="item in menus" :key="item.id" :index="''+item.id">
        <template #title>
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item-group v-for="item2 in item.child" :key="item2.id" :index="''+item2.id" :title="item2.name"  >
          <el-menu-item v-for="item3 in item2.child" :key="item3.id"  :index="item3.path+' '+item3.name">{{ item3.name }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <template #title>导航二</template>
      </el-menu-item>
      <el-menu-item index="3" disabled v-if="1">
        <i class="el-icon-document"></i>
        <template #title>导航三</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
  <el-aside style="position:fixed;height:100vh;transition: all .2s;width:0" class="menu-wap">
    <el-menu
      :default-active="$route.fullPath"
      class="el-menu-vertical-demo"
      @open="menuOpen"
      @close="menuClose"
      :collapse="isCollapse"
      @select="menuSelectWap"
    >
      <el-sub-menu  v-for="item in menus" :key="item.id" :index="''+item.id">
        <template #title>
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item-group v-for="item2 in item.child" :key="item2.id" :index="''+item2.id" :title="item2.name"  >
          <el-menu-item v-for="item3 in item2.child" :key="item3.id"  :index="item3.path+' '+item3.name">{{ item3.name }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <template #title>导航二</template>
      </el-menu-item>
      <el-menu-item index="3" disabled v-if="1">
        <i class="el-icon-document"></i>
        <template #title>导航三</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
<el-container>
<el-header  class="text-right text-base" style="height:3.5rem;border:1px solid #e6e6e6;overflow: hidden;">
  <div>

    <el-button icon="el-icon-s-grid" @click="isCollapse=!isCollapse" class="toggleMenu float-left border-0 p-3 text-xl"></el-button>
    <el-button icon="el-icon-s-grid" @click="toggleWapMenu" class="toggleWapMenu float-left border-0 p-3 text-xl"></el-button>

    <div v-if="isLogin" class="inline-block">
      {{ uinfo.name }}
      <el-button type="primary" size="mini" @click="logout">退出</el-button>
    </div>
    <div v-else>
      <router-link to="/login">登陆 {{ isLogin }}</router-link> <br>
    </div>
    <el-dropdown>
      <i class="el-icon-setting p-3 text-xl"></i>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

  </div>
</el-header>
 <el-tabs
  v-model="tabName"
  type="card"
  closable
  @tab-remove="tabDel"
  @tab-click="tabClick"
>
  <el-tab-pane
    v-for="(item,index) in tabs"
      :key="index"
      :label="item.label"
      :name="item.name"
      >
  </el-tab-pane>
</el-tabs>

<router-view  v-slot="{ Component }">
<transition name="fade">
<keep-alive>
  <component :is="Component"/>
</keep-alive>
</transition>
</router-view>
</el-container>
</template>

<script lang="ts">
import {API,MUTION} from '@/utils/common'
import store from '@/store/IndexStore'
// import MyMenu from '@/comps/MyMenu.vue'
import $ from 'n-zepto'
import { defineComponent } from 'vue'
import { base } from '@/mixin/base'
// 下一行不检查 eslint-disable-next-line
// 本文件不检查 eslint-disable
// 无效只能去掉ts文件 @ts-ignore
export default defineComponent({
  name: 'home',
  mixins: [base],
  data(){
    return {
      api: API.USER,
      isCollapse: false,
      toggleWap: true,
      menus: [{
          id: 1,
          icon: 'el-icon-menu',
          name: '系统',
          path: '',
          status: 1,
          params: '',
          child: [
            {
               id: 11,
               icon: '',
               name: '系统管理',
               path: '',
               params: '',
               status: 1,
               child: [
                 {
                  id: 111,
                  icon: '',
                  name: '用户管理',
                  path: '/home/user',
                  params: '',
                  status: 1,
                },
                 {
                  id: 112,
                  icon: '',
                  status: 1,
                  name: '菜单管理',
                  path: '/home/menu',
                  params: '',
                },
              ]
            }
          ]
      },{
          id: 2,
          icon: 'el-icon-location',
          name: '其他',
          path: '',
          status: 0,
          params: '',
          child: []
        }
      ],
      tabs: [
        {
          label: '首页',
          name: '/home',
          icon:  'el-icon-date',
        },
      ],
      tabName: '/home',
    }
  },
  methods: {
    tabClick(tab) {
        // console.log('tab click' , tab);
        this.$router.push(tab.props.name)

    },
    tabDel(targetName) {
      // console.log('tab del' , targetName);
      const nowName = this.$route.fullPath
      if(nowName !== this.tabName){
        this.tabName = nowName
      }
      this.tabs = this.tabs.filter((tab) => tab.name !== targetName)
    },
    toggleWapMenu(){
      this.toggleWap = this.toggleWap ? false : true
      console.log(' toggleWap' , this.toggleWap )
      $('.menu-wrap').css('width',this.toggleWap ? '0vw' : '100vw')
      $('.menu-wap').css('width', this.toggleWap ? '0px' : '200px')
    },
    menuOpen(key, keyPath) {
      console.log('menu-open',key, keyPath)
    },
    menuClose(key, keyPath) {
      console.log('menu-close',key, keyPath)
    },
    menuSelectWap(key2, keyPath, item, routeResult) {
      this.toggleWapMenu();
    },
    menuSelect(key2, keyPath, item, routeResult) {
      // console.log('menu-select',key2,keyPath,item, routeResult)
      try{
        const [key,name] = key2.trim().split(' ',2)
        this.$router.push(key)
        if(key !== this.tabName){
          this.tabName = key
        }
        let add = true;
        for (let item of this.tabs) {
          if(item.name == key){
              add = false
              break;
          }
        }
        if(add){
          this.tabs.push({
              label: name,
              name: key,
              icon:  '',
          })
        }
      }catch(e){ console.log('menu-select-error',e,key2,keyPath); }
    },
    logout() {
        store.commit(MUTION.LOGOUT)
    },
  },
  // components: {
  //   MyMenu
  // }
})
</script>

<style>
.el-header{
  padding : 0 !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
.el-menu--collapse{
  height: 100%;
}
.el-tabs__nav .el-tabs__item:nth-child(1) span.el-icon-close{
 display: none;
}
.menu-wrap{
  width: 0vw;
  position: fixed;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  z-index:999;
}
.menu-wap{
  z-index:1000
}
 /* dispaly:css控制显示隐藏 , width:js 控制 */
@media screen and (max-width:768px) {
  .menu-pc,.toggleMenu{
    display: none !important;
  }
}
@media screen and (min-width:768px) {
  .menu-wap,.toggleWapMenu,.menu-wrap{
    display: none !important;
  }
}
</style>